<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">
    <title>Project Data Collector</title>
    <script src="js/audiodisplay.js"></script>
    <script src="js/recorderjs/recorder.js"></script>
    <script src="js/main.js"></script>
    <script src="js/vue.js"></script>

    <style>
        
        /*html {*/
            /*overflow: hidden;*/
        /*}*/

        body {
            font: 14pt Arial, sans-serif;
            background: lightgrey;
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            margin: 0 0;
        }

        canvas {
            display: inline-block;
            background: #202020;
            width: 95%;
            height: 45%;
            box-shadow: 0px 0px 10px blue;
        }

        #panel {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 20%;
            width: 100%;
        }

        #record {
            height: 15vh;
        }

        #record.recording {
            background: red;
            background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%, lightgrey 75%, lightgrey 100%, #7db9e8 100%);
            background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%, lightgrey 75%, lightgrey 100%, #7db9e8 100%);
            background: radial-gradient(center, ellipse cover, #ff0000 0%, lightgrey 75%, lightgrey 100%, #7db9e8 100%);
        }

        #save,
        #save img {
            height: 10vh;
        }

        #save {
            opacity: 0.25;
        }

        #save[download] {
            opacity: 1;
        }

        #viz {
            height: 80%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        @media (orientation: landscape) {
            body {
                flex-direction: row;
            }
            #panel {
                flex-direction: column;
                height: 100%;
                width: 30%;
            }
            #viz {
                height: 100%;
                width: 70%;
            }
        }

        #controls {
            flex-direction: row;
            text-align: center;
        }

        button {
            height: 15vh;
            width: 15vh;
            margin: 2vh;
        }
    </style>
</head>

<body>
    <div id="viz" width="1024">
        <canvas id="analyser" width="1024" height="500"></canvas>
        <canvas id="wavedisplay" width="1024" height="500"></canvas>
    </div>
    <div id="panel">
        <div>
        <p>请输入学号和要录制的条目编号(默认为1)，用于自动生成文件名</p>
        <input type="text" v-model="stu_id" placeholder="你的学号">
        <input type="text" v-model="current" placeholder="">
        </div>
        <p>请以正常语速，标准发音，念出（你有+2s的时间）</p>
        <div id="display" :token="token">
            <h1>{{ token }}</h1>
        </div>
        <div id="controls">
            <button id="record" @click="startRecord()">开始录音(Enter)</button>
            <button id="play" @click="play()">播放录音(p)</button>
            <button id="download" @click="download()">确认当前，并下载(Space)</button>
        </div>
        <div id="process" :current="current">
            <p>进度条</p>
            总共录制了 {{ current - 1 }} 条语音，还有 {{ 400 - current + 1 }}条 n(*≧▽≦*)n
        </div>
    </div>

    <script>
        var myVue = new Vue({
            el: "#panel",
            data: {
                tokens: "语音 余音 识别 失败 中国 忠告 北京 背景 上海 商行 复旦 饭店 Speech Speaker Signal File Print Open Close Project".split(' '),
                process: null,
                started: false,
                current: 0,
                token: 0,
                stu_id: "",
                played: false
            },
            methods: {
                format: function (num) {
                    if (num < 10) {
                        return "0" + num;
                    }
                    return String(num);
                },
                genNum: function () {
                    return Math.floor(Math.random() * 20);
                },
                gen: function () {
                    ++this.current;
                },
                startRecord: function () {
                    if (window.adplay) {
                        window.adplay.pause();
                    }
                    if (!this.stu_id) {
                        alert("请输入你的学号！");
                        return;
                    }
                    if (!this.started) {
                        console.log('record start');
                        var icon = document.querySelector("#record");
                        toggleRecording(icon);
                        this.started = true;
                        setTimeout(this.endRecord, 2000);
                    }
                },
                getCount: function () {
                    var count = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
                    for (var i = 1; i <= this.current; ++i) {
                        count[this.process[i]]++;
                    }
                    return count[this.process[this.current]];
                },
                endRecord: function () {
                    console.log('record end');
                    var icon = document.querySelector('#record');
                    var id = this.process[this.current];
                    window.filename = this.stu_id + '-' + this.format(id) + '-' + this.format(this.getCount(this.current));
                    toggleRecording(icon);
                    this.started = false;
                },
                download: function () {
                    if (this.played) {
                        window.download.click();
                        this.gen();
                        this.played = false;
                        window.adplay.pause();
                        window.adplay.currentTime = 0;
                    } else {
                        alert("请先自己播放一遍验证一下哟╮(╯_╰)╭");
                    }
                },
                play: function () {
                    window.adplay.play();
                    this.played = true;
                },
            },
            created: function() {
                this.process = [-1, 6, 0, 17, 11, 15, 18, 6, 0, 13, 17, 1, 0, 18, 15, 12, 8, 14, 9, 16, 17, 18, 5, 7, 2, 15, 3, 13, 18, 16, 9, 3, 9, 0, 8, 18, 3, 19, 17, 17, 0, 13, 17, 12, 11, 16, 9, 19, 4, 10, 0, 18, 18, 11, 14, 10, 12, 17, 2, 16, 19, 8, 3, 8, 8, 1, 9, 1, 12, 2, 1, 7, 14, 3, 14, 2, 3, 16, 16, 13, 7, 15, 12, 10, 14, 7, 7, 13, 17, 9, 4, 19, 0, 10, 13, 17, 13, 6, 7, 17, 11, 18, 3, 15, 6, 9, 6, 9, 8, 0, 3, 0, 16, 1, 10, 5, 15, 12, 6, 4, 0, 17, 19, 11, 10, 13, 7, 4, 8, 8, 15, 2, 2, 15, 8, 15, 7, 4, 6, 7, 10, 0, 2, 6, 13, 11, 7, 0, 8, 18, 10, 7, 2, 1, 19, 1, 9, 3, 5, 10, 11, 6, 2, 9, 5, 11, 5, 9, 12, 19, 13, 18, 1, 19, 17, 10, 0, 19, 15, 8, 8, 15, 5, 0, 8, 4, 10, 8, 7, 19, 12, 16, 19, 17, 5, 18, 11, 4, 13, 16, 11, 4, 1, 2, 14, 5, 5, 13, 16, 18, 4, 1, 19, 7, 12, 10, 16, 9, 17, 12, 19, 2, 8, 2, 16, 10, 15, 3, 6, 15, 10, 3, 18, 5, 1, 8, 19, 4, 5, 11, 12, 18, 19, 1, 3, 15, 10, 5, 14, 18, 1, 14, 7, 11, 1, 19, 4, 11, 13, 5, 2, 12, 15, 2, 13, 6, 12, 16, 0, 5, 2, 11, 11, 14, 15, 12, 16, 9, 17, 10, 6, 10, 7, 3, 6, 17, 8, 1, 14, 11, 12, 7, 16, 13, 19, 18, 13, 12, 13, 4, 0, 14, 1, 9, 8, 18, 14, 12, 4, 8, 4, 3, 19, 7, 10, 4, 7, 15, 5, 16, 8, 9, 11, 3, 17, 1, 5, 5, 15, 6, 0, 6, 12, 9, 6, 11, 0, 2, 6, 13, 7, 3, 1, 18, 14, 12, 5, 12, 10, 17, 3, 2, 18, 4, 4, 17, 16, 13, 2, 6, 6, 14, 10, 2, 3, 19, 4, 5, 5, 15, 11, 18, 14, 7, 13, 2, 16, 15, 14, 0, 9, 9, 16, 14, 9, 14, 4, 0, 9, 14, 1, 1, 17, 14, 16, 4, 3, 3, 6, 19, 11];
                this.gen();
            },
            watch: {
                current: function () {
                    this.token = this.tokens[this.process[this.current]];
                }
            }
        });
        document.onkeyup = function(evt) {
            var e = evt || window.evt || arguments.callee.caller.arguments[0];
            if (e) {
                if (e.keyCode === 13)
                    myVue.startRecord();
                else if (e.keyCode == 32)
                    myVue.download();
                else if (e.keyCode == 80)
                    myVue.play();
            }
        }
    </script>
</body>

</html>